<template>
  <div class="file-uploader">
    <el-upload
      ref="uploadRef"
      class="upload-area"
      drag
      :accept="accept"
      :multiple="multiple"
      :show-file-list="false"
      :before-upload="handleBeforeUpload"
      :on-change="handleChange"
      :auto-upload="false"
    >
      <div class="upload-content">
        <el-icon class="upload-icon" :size="60">
          <UploadFilled />
        </el-icon>
        <div class="upload-text">
          <p class="primary-text">点击或拖拽文件到此区域上传</p>
          <p class="secondary-text">支持 {{ acceptText }} 格式文件</p>
        </div>
      </div>
    </el-upload>

    <!-- 上传进度 -->
    <div v-if="uploading" class="upload-progress">
      <el-progress 
        :percentage="uploadProgress" 
        :status="uploadStatus"
      />
      <p class="progress-text">{{ progressText }}</p>
    </div>

    <!-- 已上传文件信息 -->
    <div v-if="fileInfo && !uploading" class="file-info">
      <div class="file-item">
        <el-icon class="file-icon" :size="24" color="#67C23A">
          <Document />
        </el-icon>
        <div class="file-details">
          <p class="file-name">{{ fileInfo.name }}</p>
          <p class="file-meta">{{ fileInfo.size }} | {{ fileInfo.uploadTime }}</p>
        </div>
        <el-button 
          type="danger" 
          :icon="Delete" 
          circle 
          size="small"
          @click="handleRemove"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled, Document, Delete } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  accept: {
    type: String,
    default: '.dcm,.dicom'
  },
  maxSize: {
    type: Number,
    default: 100 // MB
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['upload-success', 'upload-error', 'file-change', 'file-remove'])

// Refs
const uploadRef = ref(null)
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadStatus = ref('')
const fileInfo = ref(null)

// Computed
const acceptText = computed(() => {
  return props.accept.replace(/\./g, '').toUpperCase()
})

const progressText = computed(() => {
  if (uploadProgress.value < 100) {
    return `上传中... ${uploadProgress.value}%`
  } else if (uploadStatus.value === 'success') {
    return '上传成功！'
  } else if (uploadStatus.value === 'exception') {
    return '上传失败，请重试'
  }
  return ''
})

// Methods
const handleBeforeUpload = (file) => {
  // 检查文件类型
  const extension = '.' + file.name.split('.').pop().toLowerCase()
  const acceptList = props.accept.split(',').map(item => item.trim())
  
  if (!acceptList.includes(extension)) {
    ElMessage.error(`只支持 ${acceptText.value} 格式的文件`)
    return false
  }

  // 检查文件大小
  const sizeMB = file.size / 1024 / 1024
  if (sizeMB > props.maxSize) {
    ElMessage.error(`文件大小不能超过 ${props.maxSize}MB`)
    return false
  }

  return true
}

const handleChange = (file) => {
  if (file.status === 'ready') {
    // 模拟上传过程
    simulateUpload(file)
  }
}

const simulateUpload = (file) => {
  uploading.value = true
  uploadProgress.value = 0
  uploadStatus.value = ''

  const interval = setInterval(() => {
    uploadProgress.value += 10

    if (uploadProgress.value >= 100) {
      clearInterval(interval)
      uploadStatus.value = 'success'
      
      setTimeout(() => {
        uploading.value = false
        
        // 保存文件信息
        fileInfo.value = {
          name: file.name,
          size: (file.size / (1024 * 1024)).toFixed(2) + ' MB',
          uploadTime: new Date().toLocaleString('zh-CN'),
          raw: file.raw,
          // 模拟三视图CT图像
          images: {
            coronal: '/src/img/ct1.png',    // 冠状位
            sagittal: '/src/img/ct2.png',   // 矢状位
            axial: '/src/img/ct3.png'       // 轴位
          }
        }

        emit('upload-success', fileInfo.value)
        emit('file-change', fileInfo.value)
        
        ElMessage.success('文件上传成功！')
      }, 500)
    }
  }, 200)
}

const handleRemove = () => {
  fileInfo.value = null
  uploadProgress.value = 0
  emit('file-remove')
  ElMessage.info('已移除文件')
}

// 暴露方法给父组件
defineExpose({
  clearFiles: handleRemove
})
</script>

<style lang="scss" scoped>
.file-uploader {
  width: 100%;

  .upload-area {
    width: 100%;

    :deep(.el-upload) {
      width: 100%;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        border-color: #409EFF;
        
        .upload-icon {
          color: #409EFF;
          transform: scale(1.1);
        }
      }
    }

    :deep(.el-upload-dragger) {
      padding: 40px 20px;
      border-radius: 12px;
      border: 2px dashed #d9d9d9;
      background: #fafafa;
      transition: all 0.3s ease;

      &:hover {
        border-color: #409EFF;
        background: #f0f7ff;
      }
    }

    .upload-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;

      .upload-icon {
        color: #909399;
        transition: all 0.3s ease;
      }

      .upload-text {
        text-align: center;

        .primary-text {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 8px;
        }

        .secondary-text {
          font-size: 13px;
          color: #909399;
          margin: 4px 0;
        }
      }
    }
  }

  .upload-progress {
    margin-top: 20px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;

    .progress-text {
      margin-top: 12px;
      text-align: center;
      font-size: 14px;
      color: #606266;
    }
  }

  .file-info {
    margin-top: 20px;

    .file-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: #f0f9ff;
      border: 1px solid #b3e0ff;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
      }

      .file-icon {
        flex-shrink: 0;
      }

      .file-details {
        flex: 1;
        min-width: 0;

        .file-name {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .file-meta {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}
</style>

